<template>
  <div class="info">
    <header>
      <span @click="$back()">
        <el-icon color="#fff" size="18">
          <ArrowLeftBold />
        </el-icon>
      </span>
      <strong>{{ $t("language.My.column1") }}</strong>
      <span @click="$openPage('/kefu')">
        <NuxtImg src="/img/kefu.png" alt="" />
      </span>
    </header>
    <main class="info">
      <div class="header">
        <NuxtImg src="/img/avater.png" alt="" />
        <div class="middle">
          <strong> {{ $t("language.My.nickname") }}: {{ info.nickName }} </strong>
          <strong>ID：{{ info.gameID }}</strong>
        </div>
        <div class="right">
          <!-- @click="copyToClipboard(info.gameID, proxy)" -->
          <el-button @click="copyToClipboard(info.gameID)" class="right-btn">{{ $t("language.info.copy")
            }}</el-button>
          <span></span>
        </div>
      </div>
      <div class="login">
        {{ $t("language.My.login") }}{{ info.lastLogonDate }}
      </div>
      <ul>
        <li>
          <NuxtImg src="/img/info1.png" alt="" />
          <div>
            <h3>{{ $t("language.info.icon1") }}</h3>
            <span>{{ info.accounts }}</span>
          </div>
          <el-icon @click="editdialog('type2')" v-if="!info.isModifyAccounts" name="arrow" color="#b5bac8" size="18">
            <ArrowRightBold />
          </el-icon>
        </li>
        <li>
          <NuxtImg src="/img/info2.png" alt="" />
          <div>
            <h3>{{ $t("language.info.icon2") }}</h3>
            <span>{{ info.countryCode }}{{ info.mobile }}</span>
          </div>
          <i></i>
        </li>
        <li @click="editdialog('type3')">
          <NuxtImg src="/img/info3.png" alt="" />
          <div>
            <h3>{{ $t("language.info.icon3") }}</h3>
          </div>
          <el-icon color="#b5bac8" size="18">
            <ArrowRightBold />
          </el-icon>
        </li>
        <li>
          <NuxtImg src="/img/info4.png" alt="" />
          <div>
            <h3>{{ $t("language.info.icon4") }}</h3>
          </div>
          <el-icon @click="editdialog('type4')" color="#b5bac8" size="18">
            <ArrowRightBold />
          </el-icon>
        </li>
        <li>
          <NuxtImg src="/img/info5.png" alt="" />
          <div>
            <h3>{{ $t("language.info.icon5") }}</h3>
            <span>*****</span>
          </div>
          <el-icon @click="editdialog('type5')" color="#b5bac8" size="18">
            <ArrowRightBold />
          </el-icon>
        </li>
        <li>
          <NuxtImg src="/img/info6.png" alt="" />
          <div>
            <h3>{{ $t("language.info.icon6") }}</h3>
            <span>{{ info.spreaderCode }}</span>
          </div>
          <el-button @click="copyToClipboard(info.spreaderCode)">{{
        $t("language.info.copy")
      }}</el-button>
        </li>
      </ul>
    </main>
    <div class="dialog">
      <el-dialog width="90%" v-model="initVisible2" :show-close="false" align-center>
        <div id="bigcloser" style="border-bottom: 1px solid #4a4c53; padding-bottom: 15px">
          <strong></strong>
          <h4>
            {{ $t("language.initdialog.init2title") }}
          </h4>
          <span @click="initVisible2 = false">
            <el-icon color="#b5b6c8" size="16">
              <CloseBold />
            </el-icon>
          </span>
        </div>
        <div class="dialogmain">
          <template v-if="type1 == 'type1'">
            <el-input v-model="input" clearable :placeholder="$t('language.My.placehold')" />
            <el-button class="confirm" @click="open2">{{
        $t("language.My.btn1")
      }}</el-button>
          </template>
          <template v-if="type1 == 'type2'">
            <el-form ref="accountForm" :model="ChangeAccount" label-width="auto" class="demo-ruleForm"
              label-position="top" status-icon>
              <el-form-item :label="$t('language.My.AcountLabel')" prop="newAccounts" :rules="[
        {
          required: true,
          message: $t('language.commontips.empty'),
          trigger: 'blur',
        },
        {
          min: 6,
          max: 20,
          message: t('language.loginhome.tips2'),
          trigger: ['blur'],
        },
      ]">
                <el-input clearable :placeholder="$t('language.My.placehold1')" v-model="ChangeAccount.newAccounts" />
              </el-form-item>
            </el-form>
            <p class="text">{{ $t("language.My.dialogtext") }}</p>
            <el-button :loading="loading" :disabled="loading" class="confirm" @click="AccountChange">{{
        $t("language.My.btn2") }}</el-button>
          </template>
          <template v-if="type1 == 'type3'">
            <el-form ref="bangEmailform" :model="bangEmail" label-width="0px" label-position="left" status-icon
              style="width: 100%">
              <el-form-item label="" prop="email" :rules="[
        {
          required: true,
          message: $t('language.commontips.empty'),
          trigger: 'blur',
        },
        {
          min: 6,
          max: 20,
          message: t('language.loginhome.tips2'),
          trigger: ['blur'],
        },
      ]">
                <div class="message">
                  <el-icon size="20">
                    <Message />
                  </el-icon>
                  <el-input clearable v-model="bangEmail.email" :placeholder="$t('language.My.placehold2')" />
                </div>
              </el-form-item>
            </el-form>

            <el-button :loading="loading" :disabled="loading" class="confirm" @click="BandEmailSubmit">{{
        $t("language.My.btn1") }}</el-button>
          </template>
          <template v-if="type1 == 'type4'">
            <h3>{{ $t("language.initdialog.init3title") }}</h3>
            <el-form ref="bandForm" :model="bandIDform" label-width="auto" class="demo-ruleForm" label-position="top"
              status-icon>
              <el-form-item prop="inviteCode" :rules="[
        {
          required: true,
          message: $t('language.commontips.empty'),
          trigger: 'blur',
        },
        {
          min: 6,
          max: 20,
          message: t('language.loginhome.tips2'),
          trigger: ['blur'],
        },
      ]">
                <el-input clearable :placeholder="$t('language.My.placehold3')" v-model="bandIDform.inviteCode" />
              </el-form-item>
            </el-form>
            <!-- <el-input
            v-model="input"
            :placeholder="$t('language.My.placehold3')"
          /> -->
            <p class="note">{{ $t("language.My.dialogtext2") }}</p>
            <el-button class="confirm" @click="bandsubmit">{{
        $t("language.My.btn2")
      }}</el-button>
          </template>
          <template v-if="type1 == 'type5'">
            <el-form :model="ChangePassword" ref="passwordForm" label-width="0px" class="demo-dynamic">
              <el-form-item prop="oldPassword" :rules="[
        {
          required: true,
          message: $t('language.commontips.empty'),
          trigger: 'blur',
        },
        {
          min: 6,
          max: 20,
          message: t('language.loginhome.tips2'),
          trigger: ['blur'],
        },
      ]">
                <div class="password">
                  <el-icon size="20">
                    <Lock />
                  </el-icon>
                  <el-input clearable v-model="ChangePassword.oldPassword"
                    :placeholder="$t('language.My.placehold4')" />
                </div>
              </el-form-item>
              <el-form-item prop="newPassword" :rules="[
        {
          required: true,
          message: $t('language.commontips.empty'),
          trigger: 'blur',
        },
        {
          min: 6,
          max: 20,
          message: t('language.loginhome.tips2'),
          trigger: ['blur'],
        },
      ]">
                <div class="password">
                  <el-icon size="20">
                    <Lock />
                  </el-icon>
                  <el-input clearable v-model="ChangePassword.newPassword"
                    :placeholder="$t('language.My.placehold5')" />
                </div>
              </el-form-item>
              <el-form-item prop="confirmPassword" :rules="[
        {
          required: true,
          message: $t('language.commontips.empty'),
          trigger: 'blur',
        },
        {
          min: 6,
          max: 20,
          message: t('language.loginhome.tips2'),
          trigger: ['blur'],
        },
      ]">
                <div class="password">
                  <el-icon size="20">
                    <Lock />
                  </el-icon>
                  <el-input clearable v-model="ChangePassword.confirmPassword"
                    :placeholder="$t('language.My.placehold6')" />
                </div>
              </el-form-item>
            </el-form>
            <el-button :loading="loading" :disabled="loading" class="confirm" @click="passwordChange">
              {{ $t("language.My.btn2") }}
            </el-button>
          </template>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script setup lang="ts">

import { ArrowLeftBold, ArrowRightBold, CloseBold, Message, Lock } from '@element-plus/icons-vue'
import { reactive, shallowRef, ref, watch, computed } from "vue";
import { useI18n } from "vue-i18n";

let info: any = computed(() => store.userinfo)
const { t } = useI18n();
let store = useStore()
const open2 = (): void => {
  ElMessage({
    message: t("language.info.copytips"),
    type: "success",
  });
};
// 复制
let copyToClipboard = (text: string | number | null | undefined) => {
  let tmpTextField: any = document.createElement("textarea");
  tmpTextField.textContent = text;
  tmpTextField.setAttribute("style", "position:absolute; right:200%;");
  document.body.appendChild(tmpTextField);
  tmpTextField.select();
  tmpTextField.setSelectionRange(0, 99999); /*For mobile devices*/
  document.execCommand("copy");
  ElMessage({
    message: t("language.commontips.copysuccess"),
    type: "success",
    duration: 1000,
  });
}
let loading = shallowRef<boolean>(false);
// 修改密码
let passwordForm = ref<null | any>(null);
let ChangePassword = shallowReactive<{
  oldPassword: string,
  newPassword: string,
  confirmPassword: string
}>({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});
let passwordChange = (): void => {
  passwordForm.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      let passwordlist: any = {};
      for (let key in JSON.parse(JSON.stringify(ChangePassword))) {
        passwordlist[key] = encrypt(
          JSON.parse(JSON.stringify(ChangePassword))[key]
        )
          .toString()
          .substring(0, 32);
      }
      passwordlist['id'] = info.value.gameID
      useHttpPOST(`/UserCenter/v1.0/User/Password`, passwordlist)
        .then(() => {
          ElMessage({
            type: "success",
            message: t("language.commontips.changetips"),
            duration: 1000,
            onClose: () => {
              initVisible2.value = false;
              passwordForm.value.resetFields();
            },
          });
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      return false;
    }
  });
};

//修改账户
let accountForm = ref<null | any>(null);
let ChangeAccount = shallowReactive<{ id: number, newAccounts: string }>({
  id: info.value.gameID,
  newAccounts: "",
});
let initVisible2 = shallowRef<boolean>(false);
watch(
  () => initVisible2.value,
  () => {
    ChangeAccount.newAccounts = info.accounts;
  },
  {
    immediate: true,
    deep: true
  }
);
let AccountChange = ():void => {
  ChangeAccount.id = info.value.gameID
  accountForm.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      useHttpPOST(
        `/UserCenter/v1.0/User/Accounts`,
        ChangeAccount
      )
        .then(({ data }: { data: any }) => {
          switch (data.value.code) {
            case 0:
              ElMessage({
                type: "success",
                message: t("language.commontips.changetips"),
                duration: 1000,
                onClose: () => {
                  // info.accounts = ChangeAccount.newAccounts;
                  // console.log(JSON.stringify(data.data), '0000');
                  if (data.value.data) {
                    // localStorage.setItem("info", JSON.stringify(data.data));
                    // store.$patch({info,})
                  }
                  initVisible2.value = false;
                  accountForm.value.resetFields();
                },
              });
              break;
          }

        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      return false;
    }
  });
};
//绑定邮箱
let bangEmailform = ref<null | any>(null);
let bangEmail = shallowReactive<{id:number,email:string}>({
  id: 0,
  email: "",
});
let BandEmailSubmit = ():void => {
  bangEmailform.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      useHttpPOST(`/UserCenter/v1.0/User/BindEmail`, bangEmail)
        .then(() => {
          ElMessage({
            type: "success",
            message: t("language.commontips.bangtips"),
            duration: 1000,
            onClose: () => {
              bangEmailform.value.resetFields();
              initVisible2.value = false;
            },
          });
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      return false;
    }
  });
};
//绑定上级
let bandForm = ref<null | any>(null);
let bandIDform =shallowReactive<{id:number,inviteCode:string}>({
  id: info.value.gameID,
  inviteCode: ""
});
let bandsubmit = ():void => {
  bandForm.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      useHttpPOST(
        `/UserCenter/v1.0/User/BindInviteCode`,
        bandIDform
      )
        .then(({ data }: { data: any }) => {
          switch (data.value.code) {
            case 0:
              ElMessage({
                type: "success",
                message: t("language.commontips.changetips"),
                duration: 1000,
                onClose: () => {
                  bandForm.value.resetFields();
                  info.spreaderCode = bandIDform.id;
                  initVisible2.value = false;
                },
              });
              break;
          }

        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      return false;
    }
  });
};


let type1 = shallowRef<string>("type1");
const input = shallowRef<string>("");
let editdialog = (types: any) => {
  type1.value = types;
  if (type1.value == 'type2' && info.isModifyAccounts) return
  initVisible2.value = true;
};
</script>
<style lang="scss">
.dialog {
  .el-input__wrapper {
    background-color: rgb(39, 42, 48) !important;
    box-shadow: none;
    outline: none !important;
    border: 1px solid #4a4c53;
    height: 40px !important;

    border-radius: 10px;
  }

  .el-input__wrapper.is-focus {
    border-color: rgb(0, 144, 109) !important;
  }

  .el-input__inner {
    color: #fff !important;
  }

  .el-dialog {
    padding: 15px !important;
    background-color: rgb(50, 53, 62) !important;
    border-radius: 10px !important;
  }

  .dialogmain {
    padding-top: 30px;

    .confirm {
      background: #0a906c;
      border: none;
      color: #fff;
      display: block;
      width: 40%;
      height: 40px;
      padding: 0 14px;
      font-size: 14px;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      margin: 30px auto 20px;
    }

    .text {
      font-size: 14px;
      color: #b5bac8;
      margin: 14px 0;
    }

    .message {
      width: 100%;
      @include flex(row, flex-start, center);

      .el-icon {
        margin: 0 10px 0 20px;
      }
    }

    .password {
      @include flex(row, flex-start, center);
      width: 100%;

      .el-icon {
        margin: 0 10px 0 20px;
      }
    }

    .password+.password {
      margin-top: 20px;
    }

    h3 {
      font-size: 22px;
      color: #b9bdc9;
      margin-bottom: 30px;
    }

    .note {
      font-size: 14px;
      color: #748494;
      line-height: 27px;
      margin-top: 40px;
    }
  }

  .el-dialog__header {
    padding: 0 !important;
  }
}
</style>

<style scoped lang="scss">
#bigcloser {
  width: 100%;
  @include flex(row, flex-end, center);

  strong {
    display: block;
    width: 28px;
    height: 28px;
  }

  h4 {
    flex: 1;
    font-size: 18px;
    color: #fff;
    text-align: center;
  }

  span {
    display: block;
    width: 28px;
    cursor: pointer;
    height: 28px;
    @include flex(row, center, center);
    border: 2px solid #b5b6c8;
    border-radius: 16px;
    margin-right: -7px;
  }
}



.info {
  background-color: #1a1a1a;
  padding: 50px 0px 90px;
  width: 100%;
  background-color: rgb(26, 26, 26);

  header {
    width: 100%;
    height: 45px;
    position: fixed;
    left: 0;
    top: 0;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    padding: 0 20px;
    color: #fff;

    span {
      display: block;
      height: 28px;
      width: 28px;
      @include flex(row, center, center);
      line-height: 28px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .header {
    padding: 0px 20px 8px;
    @include flex(row, space-between, center);



    img {
      width: 58px;
      border-radius: 29px;
      margin-right: 25px;
    }

    .middle {
      flex: 1;
      @include flex(column, center, flex-start);

      strong {
        color: #fff;
      }

      strong+strong {
        margin-top: 13px;
      }
    }

    .right {
      width: 90px;
      @include flex(column, center, flex-end);

      .right-btn {
        background: #0a906c;
        border: none;
        color: #fff;
        display: block;
        height: 28px;
        padding: 0 15px;
        border-radius: 5px;
        text-align: center;
        line-height: 28px;
        font-size: 12px;
      }

      .right-btn {
        margin-top: 8px;
      }
    }
  }

  .login {
    width: 100%;
    text-align: right;
    padding: 7px 20px;
    color: #95979e;
  }

  ul {
    width: 100%;
    padding: 0 20px;

    .el-icon {
      cursor: pointer;
    }

    li {
      height: 57px;
      margin-top: 8px;
      padding-bottom: 5px;
      @include flex(row, space-between, center);
      border-bottom: 1px solid rgba(74, 76, 83, 0.36470588235294116);

      img {
        width: 33px;
      }

      div {
        flex: 1;
        padding-left: 20px;

        h3 {
          font-size: 16px;
          color: #fff;
          font-weight: normal;
        }

        span {
          font-size: 16px;
          color: #b5bac8;
        }
      }

      > :deep(.el-button) {
        background-color: #0a906c;
        color: #fff;
        display: block;
        height: 28px;
        border: none;
        padding: 0 15px;
        border-radius: 5px;
        text-align: center;
        line-height: 28px;
        font-size: 12px;
      }
    }
  }
}
</style>
